<template>
  <div class="role-management-container">
    <el-row :gutter="20">
      <!-- 左侧角色列表 -->
      <el-col :span="23">
        <el-card>
          <h3>角色列表</h3>
          <common-table
              :fields="roleFields"
              :tableData="roles"
              @edit="openAssignUserDialog"
              class="full-width"
          ></common-table>
        </el-card>
      </el-col>

      <!-- 分配用户弹窗 -->
      <el-dialog title="分配用户" :visible.sync="assignUserDialogVisible" width="650px">
        <el-transfer
            v-model="selectedUserIds"
            :data="userOptions"
            filterable
            filter-placeholder="请输入用户名"
            :titles="['可分配用户', '已分配用户']"
        ></el-transfer>
        <div slot="footer" class="dialog-footer">
          <el-button @click="assignUserDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="assignUsers">确认分配</el-button>
        </div>
      </el-dialog>
    </el-row>
  </div>
</template>

<script>
import CommonTable from '@/components/CommonTable.vue';

export default {
  components: {
    CommonTable,
  },
  data() {
    return {
      roleFields: [
        { prop: 'label', label: '角色名称', width: '180' },
        { prop: 'description', label: '描述', width: '300' },
      ], // 角色表格字段
      roles: [
        { id: 1, label: '管理员', description: '系统管理员角色' },
        { id: 2, label: '普通用户', description: '普通用户角色' },
        { id: 3, label: '编辑', description: '内容编辑角色' },
      ], // 角色数据
      users: [
        { id: 1, name: '张三', email: 'zhangsan@example.com' },
        { id: 2, name: '李四', email: 'lisi@example.com' },
        { id: 3, name: '王五', email: 'wangwu@example.com' },
      ], // 所有用户列表
      userOptions: [], // 用于 Transfer 组件的用户选项
      selectedUserIds: [], // 已分配的用户ID
      assignUserDialogVisible: false, // 分配用户弹窗的可见性
      selectedRole: null, // 当前选中的角色
    };
  },
  methods: {
    // 打开分配用户的弹窗
    openAssignUserDialog(role) {
      this.selectedRole = role;
      this.assignUserDialogVisible = true;
      this.loadUserOptions();
      this.selectedUserIds = this.getAssignedUsersForRole(role.id);
    },

    // 获取该角色已分配的用户 (模拟)
    getAssignedUsersForRole(roleId) {
      if (roleId === 1) {
        return [1]; // 管理员角色已分配张三
      } else if (roleId === 2) {
        return [2]; // 普通用户角色已分配李四
      } else if (roleId === 3) {
        return [3]; // 编辑角色已分配王五
      }
      return [];
    },

    // 加载所有用户为 Transfer 组件选项
    loadUserOptions() {
      this.userOptions = this.users.map((user) => ({
        key: user.id,
        label: `${user.name} (${user.email})`,
      }));
    },

    // 确认分配用户
    assignUsers() {
      const assignedUsers = this.selectedUserIds.map((userId) => {
        return this.users.find((user) => user.id === userId);
      });

      const assignedUserNames = assignedUsers.map((user) => user.name).join(', ');
      this.$message.success(`已为角色 ${this.selectedRole.label} 分配用户: ${assignedUserNames}`);
      this.assignUserDialogVisible = false;
    },
  },
};
</script>

<style scoped>
.role-management-container {
  padding: 20px;
}

.dialog-footer {
  text-align: right;
}

.el-col {
  padding: 10px;
}

.full-width {
  width: 100%;
}
</style>
